import React, { useEffect } from 'react';
import '../styles/components.css';

const AlertModal = ({ isVisible, type, message, onClose }) => {
  useEffect(() => {
    if (isVisible) {
      const timer = setTimeout(() => {
        onClose();
      }, 5000);
      
      return () => clearTimeout(timer);
    }
  }, [isVisible, onClose]);

  if (!isVisible) return null;
  
  return (
    <div className="modal-overlay">
      <div className={`modal ${type}`}>
        <div className="modal-content">
          <div className="modal-icon">
            {type === 'success' ? '✓' : '✕'}
          </div>
          <div className="modal-text">
            <h3>{type === 'success' ? '报警成功' : '报警失败'}</h3>
            <p>{message}</p>
          </div>
          <button className="modal-close" onClick={onClose}>
            ×
          </button>
        </div>
        <div className="modal-progress">
          <div className="progress-bar"></div>
        </div>
      </div>
    </div>
  );
};

export default AlertModal;